[color-swatch] Fix popovers with color details in <color-chart>s
#202
Conversation
✅ Deploy Preview for color-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
DmitrySharabin
force-pushed
the
popover-styles
branch
from
5df1843 to
1342729
Compare
… Safari Safari appears to have issues with combining styles within container queries with popover styles, so we need to move them out.
DmitrySharabin
force-pushed
the
popover-styles
branch
from
1342729 to
48eee8c
Compare
Now it works not only in Chrome, but also in Safari and Firefox. Support for `popover` is much wider than support for style queries.
DmitrySharabin
force-pushed
the
popover-styles
branch
from
48eee8c to
ea4d6f2
Compare
DmitrySharabin
changed the title
<color-chart>s in Safari<color-chart>s
|
Safari supports style queries, why wasn't it working in Safari? |
I still don't have an answer to this question. I can't reproduce the issue. In simple cases, everything works as expected. However, in our case, we have a hierarchy of custom elements: some are within a component's light DOM, while others are in the shadow DOM. And since we rely on many edge features, some may not play well together. I don't have another explanation for now. 🤷♂️ |
Found it! And already filed a bug report. Let's consider this PR as a workaround. 😛 Btw, style queries work correctly when |
2 participants
Now it works not only in Chrome, but also in Safari and Firefox. Support for
popoveris much wider than support for style queries. For example, Firefox still lacks them.Open the link in Safari/Firefox for preview: https://deploy-preview-202--color-elements.netlify.app/src/color-chart/
@LeaVerou, could you please take another look at this PR? It turned out that it solves issues not only in Safari.